<template>
	<view class="pages-row">
		<view class="top-search">
			<view class="tabs">
				<view v-for="(item,index) in tabArr" :key="index"  @click="checkTab(item)">
					<view :class="{'active':postData.status==item.id}">{{item.name}}
					<view v-if="postData.status==item.id" />
					</view>
				</view>
			</view>
		</view>
		<swiper :current="tabIndex" scroll-y class="swiper-box" scroll-with-animation :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,itemIndex) in tabArr" :key="itemIndex">
				<scroll-view scroll-y
				  lower-threshold="50"
				  @scrolltolower="scrollToLower" 
				  style="max-height: 88vh;"
				>
					<view class="list-box" v-if="orderList.length !== 0">
						<view v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">
							<view class="head">
								<text>订单号：{{item.sn}}</text>
								<view>{{item.status_name}}</view>
							</view>
							<view class="conts" v-for="(it,ix) in item.product_list" :key="ix">
								<image :src="it.product_image"></image>
								<view>
									<view>{{it.name}}</view>
									<view>{{it.attr_name}}</view>
									<view class="infosd">
										<view>
											<view>
												<text>￥</text>
												<view>{{it.price}}</view>
											</view>
											<text>￥{{it.market_price || 0}}</text>
										</view>
										<text>x{{it.number}}</text>
									</view>
								</view>
							</view>
							<view class="btn-list" v-if="item.status == -1">
								<view 
								@click.stop="openDialog('del',item)"
								hover-class="hover_class">删除订单</view>
							</view>
							<view class="btn-list" v-if="item.status == 1">
								<view 
								@click.stop="openDialog('cancel',item)"
								hover-class="hover_class">取消订单</view>
								<view class="confirm"
								@click.stop="payOrder(item)"
								 hover-class="hover_class">去付款</view>
							</view>
							<view class="btn-list" v-if="item.status == 2">
								<view
								@click.stop="callPhone"
								hover-class="hover_class">联系客服</view>
							</view>
							<view class="btn-list" v-if="item.status == 3">
								<view 
								@click.stop="openDialog('cancel',item)"
								hover-class="hover_class">取消订单</view>
								<view class="confirm"
								@click.stop="confirmShop(item)"
								 hover-class="hover_class">确认收货</view>
							</view>
							<view class="btn-list" v-if="item.status == 4">
								<view 
								@click.stop="addOrder(item)"
								hover-class="hover_class">再来一单</view>
							</view>
							<!-- <view class="btn-list">
								<view 
								@click.stop="openDialog('cancel',item)"
								hover-class="hover_class">取消订单</view>
								<view class="confirm"
								@click.stop="payOrder(item)"
								 v-if="userInfo.contractSignStatus == 1 && item.pay_status == 1 && item.status != 5"
								 hover-class="hover_class">去付款</view>
								 <view class="confirm"
								 @click.stop="okPro(item)"
								  v-if="item.status == 5"
								  hover-class="hover_class">确认收货</view>
							</view> -->
						</view>
					</view>
					<view class="supplier-pad" v-else>
						<empty title="暂无订单数据"/>
					</view>
					<loadMore :loadmore="loadmore" v-if="orderList.length!==0"/>
				</scroll-view>
			</swiper-item>
		</swiper>
		<tipModel ref="tipModel" @update="getList" />
		<dialogPop cancelTxt="确定" okText="再等等" 
		@cancels="savePop"
		ref="tipsPop" :content="tips[checkType].content" />
	</view>
</template>

<script>
	import {
		orderPageList,
		changeStatus,
		deleteById,
		orderPay,
		quickList
	} from 'utils/api/order.js'
	import config from 'static/js/config.js'
	import tipModel from '@/component/tipModel/index.vue'
	import {
		userIndex
	} from 'utils/api/user.js'
	import store from '@/store'
	export default {
		components: {
			tipModel
		},
		data() {
			return {
				config,
				tabIndex:0,
				postData: {
					status: '',
					page: 1,
				},
				tips: {
					'cancel': { title: '取消' ,content: '您确定取消订单吗？', status: -1 },
					'del': { title: '删除', content: '您确定删除订单吗？' },
					'confirm': { title: '收货', content: '我已收到货，确定完成交易', status: 4 }
				},
				checkType: 'cancel',
				loadmore:false,
				orderList: [],
				total: 0,
				userInfo: {},
				checkItem: [],
				tabArr: [{name: '全部', id: ''}, {name: '待付款', id: 1}, {name: '待收货', id: 3}, {name: '已收货', id: 4}]
			}
		},
		onLoad(data) {
			if(data.status) {
				this.postData.status = data.status || ''
			}
			uni.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title: '顺晟新物流',
		        type: 0,
		        summary: "",
		    }
		},
		onShow() {
			this.getUserInfo()
			this.getList();
		},
		onPullDownRefresh() {
			this.postData.page = 1;
			this.getList()
		},
		methods: {
			// 确认收货
			confirmShop(item) {
				this.$refs.tipModel.opens(item)
			},
			// 再来一单
			addOrder(item) {
				store.commit('setShopId', item.id)
				uni.switchTab({
					url: '/pages/qukieOrder/index'
				})
			},
			// 电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.contactTelephone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			// 打开提示
			openDialog(key, item) {
				this.checkItem = item
				this.checkType = key
				this.$refs.tipsPop.open()
			},
			// 订单操作
			savePop() {
				let { status, title } = this.tips[this.checkType]
				const apis = this.checkType === 'del' ? deleteById : changeStatus
				uni.showLoading({
					title: title + '中'
				})
				apis({
					id: this.checkItem.id,
					status: status
				}).then((res) => {
					uni.showToast({
						title: title + '成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.searchData()
					}, 600)
				})
			},
			payOrder(item) {
				this.$refs.tipModel.payOrder(item)
			},
			// 用户
			getUserInfo() {
				userIndex().then((res) => {
					this.userInfo = res.data
				})
			},
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.tabIndex = index;
				this.checkTab(this.tabArr[index])
			},
			// 切换类型
			checkTab(item) {
				this.postData.status = item.id
				this.searchData()
			},
			// 搜索
			searchData() {
				this.postData.page = 1;
				this.getList();
			},
			scrollToLower(){
				if(this.orderList.length<this.total){
					this.postData.page+=1;
					this.getList()
				}
			},
			getList(){
				if(this.postData.page==1){
					uni.showLoading({
					  title: '加载中',
					  mask: true
					})
				}
				orderPageList(this.postData).then((res)=>{
					uni.hideLoading();
					this.total = res.data.total;
					if (res.data.list.length !== 0) {
					  this.loadmore = false;
					}
					if (this.postData.page == 1) {
					  this.orderList = res.data.list;
					} else {
					  this.orderList = this.orderList.concat(res.data.list);
					}
					uni.stopPullDownRefresh();
					setTimeout(() => {
						this.loadmore = true;
					}, 800)
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/userPackage/pages/supplierOrder/orderDetail?id=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "userPackage/pages/order/order.scss";
</style>